//  color palette from <https://github.com/vuejs/theme>
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

//  semantic color variables for this project
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

* {
  &,
  &::before,
  &::after {
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #0003;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;

    &:hover {
      background-color: #0000004d;
    }
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }
}

body {
  min-height: 100vh;
  color: var(--el-text-color-primary);
  background: var(--el-bg-color);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 使用伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
  content: '';
  height: 0;
  line-height: 0;
  display: block;
  visibility: none;
  clear: both;
}

.clearfix {
  zoom: 1;
}

img {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul,
li {
  list-style-type: none;
}

// 文字弹窗
.adriftText {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 6000;
  white-space: nowrap;
}

// 错误页面
.errorResult {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 文字隐藏
.textFlow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  @mixin textFlow($line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
  }

  &_2 {
    @include textFlow(2);
  }

  &_3 {
    @include textFlow(3);
  }
}

.ant-image-preview-content {
  height: 100vh;
}

.m {
  @each $sa, $val in ('0': 0, '1': 0.25rem, '2': 0.5rem, '3': 0.75rem, '4': 1rem, '5': 1.25rem, '6': 1.5rem) {
    @each $da, $d in ('': '', 't': 'top', 'r': 'right', 'b': 'bottom', 'l': 'left', 'x': 'inline', 'y': 'block') {
      &#{$da}_#{$sa} {
        @if $d == '' {
          margin: $val !important;
        } @else {
          margin-#{$d}: $val !important;
        }
      }
    }
  }
}

.p {
  @each $sa, $val in ('0': 0, '1': 0.25rem, '2': 0.5rem, '3': 0.75rem, '4': 1rem, '5': 1.25rem, '6': 1.5rem) {
    @each $da, $d in ('': '', 't': 'top', 'r': 'right', 'b': 'bottom', 'l': 'left', 'x': 'inline', 'y': 'block') {
      &#{$da}_#{$sa} {
        @if $d == '' {
          padding: $val !important;
        } @else {
          padding-#{$d}: $val !important;
        }
      }
    }
  }
}

.w {
  &_100 {
    width: 100%;
  }
}

.h {
  &_100 {
    height: 100%;
  }
  &_auto {
    height: auto;
    line-height: unset;
  }
}

.flow_ {
  &hidden {
    overflow: hidden;
  }

  &unset {
    overflow: unset;
  }
}

.d {
  @each $val
    in (
      (name: 'block', val: block),
      (name: 'inline_block', val: inline-block),
      (name: 'inline', val: inline),
      (name: 'flex', val: flex),
      (name: 'inline_flex', val: inline-flex),
      (name: 'contents', val: contents),
      (name: 'hidden', val: none)
    )
  {
    &_#{map-get($val, name)} {
      display: map-get($val, val) !important;
    }
  }
}

.d_flex,
.d_inline_flex {
  &.nowrap {
    flex-wrap: nowrap !important;
  }

  &.wrap {
    flex-wrap: wrap !important;
  }

  &.vertical {
    flex-direction: column !important;
  }

  &.center {
    justify-content: center !important;
    align-items: center !important;
  }

  @each $name,
    $val
      in (
        start: flex-start,
        center: center,
        end: flex-end,
        between: space-between,
        around: space-around,
        evenly: space-evenly
      )
  {
    &.content_#{$name} {
      justify-content: $val !important;
    }
  }

  @each $name, $val in (start: flex-start, center: center, end: flex-end) {
    &.items_#{$name} {
      align-items: $val !important;
    }
  }

  &.gap_ {
    &1 {
      gap: 0.25rem;
    }

    &2 {
      gap: 0.5rem;
    }
  }

  &.hide_before::before,
  &.hide_before::after {
    display: none !important;
  }
}

.scroll {
  %scroll {
    text-wrap: nowrap;
    flex-wrap: nowrap;
    display: block;
  }

  &_x {
    @extend %scroll;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    &.show {
      overflow-x: scroll !important;
    }
  }

  &_y {
    @extend %scroll;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    &.show {
      overflow-y: scroll !important;
    }
  }

  &_auto {
    overflow: auto !important;
  }
}

.grow {
  flex-grow: 1;
}

.float {
  &,
  &_left {
    float: left;
  }

  &_right {
    float: right;
  }
}

.text {
  @each $val in (wrap, nowrap) {
    &_#{$val} {
      text-wrap: #{$val};
    }
  }
  @each $val in (center, left, right) {
    &_#{$val} {
      text-align: #{$val};
    }
  }

  @each $val
    in (
      (name: 'xs', size: 0.75rem, height: 1.2),
      (name: 'sm', size: 0.875rem, height: 1.25),
      (name: 'base', size: 1rem, height: 1.5),
      (name: 'lg', size: 1.125rem, height: 1.5),
      (name: 'xl', size: 1.25rem, height: 1.75),
      (name: 'xxl', size: 1.5rem, height: 2)
    )
  {
    &_#{map-get($val, name)} {
      font-size: map-get($val, size);
      line-height: map-get($val, height);
    }
  }
  &_ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  &_danger {
    color: var(--el-color-danger);
  }
}

.font_ {
  &300 {
    font-weight: 300;
  }

  &400 {
    font-weight: 400;
  }

  &600 {
    font-weight: 600;
  }

  &bold {
    font-weight: 700;
  }
}

.cursor {
  @each $val in (unset, pointer, move) {
    &_#{$val} {
      cursor: #{$val} !important;
    }
  }
}

.border {
  @each $da, $d in ('all': '', 't': 'top', 'r': 'right', 'b': 'bottom', 'l': 'left', 'x': 'inline', 'y': 'block') {
    &_#{$da} {
      @if $d == '' {
        border: 1px solid var(--el-border-color) !important;
      } @else {
        border-#{$d}: 1px solid var(--el-border-color) !important;
      }
    }
  }
}
